<template>
  <div class="productList">
    <div class="productSousuo">
      <div class="productSousuoTitle">
        <div class="productSousuoTitleL">筛选搜索</div>
        <div class="productSousuoTitleR">
          <el-button class="re" @click="re">重置</el-button>
          <el-button @click="sq" class="sq">查询</el-button>
        </div>
      </div>
      <div class="productSousuoinfo">
        <div>
          <span>输入搜索</span>
          <el-input v-model="listQuery.name" class="input-width" placeholder="商品名称"></el-input>
        </div>
        <div>
          <span>商品货号</span>
          <el-input class="input-width" placeholder="商品货号"></el-input>
        </div>
        <div>
          <span>上架状态</span>
          <el-select v-model="listQuery.publish_status" placeholder="全部">
            <el-option :label="'上架'" :value="1"></el-option>
            <el-option :label="'下架'" :value="0"></el-option>
          </el-select>
        </div>
        <div>
          <span>商品品牌</span>
          <el-select v-model="listQuery.brand_id" placeholder="全部">
            <el-option
              v-for="item in product_attr"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <div>
          <span>商品分类</span>
         <el-cascader @change="setCategoryid" :props="defaultParams" v-model="listQuery.product_category_id" :options = "cateList">
				</el-cascader>
        </div>
				<div>
          <span>审核状态</span>
          <el-select v-model="listQuery.verify_status" placeholder="全部">
            <el-option :label="'审核'" :value="1"></el-option>
            <el-option :label="'未审核'" :value="0"></el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="productTable">
      <div class="productTableTitle">
        <div>数据列表</div>
        <router-link to="addproduct"><el-link type="primary">添加</el-link></router-link>
      </div>
      <div class="productTableBody">
        <el-table :data="list" border style="width: 100%">
          <el-table-column prop="id" label="编号"> </el-table-column>
          <el-table-column label="商品图片">
            <template slot-scope="scope">
              <img :src="scope.row.pic" class="product_img" />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称"></el-table-column>
          <el-table-column label="价格/货号">
            <template slot-scope="scope">
              <div>
                <div>价格：￥{{ scope.row.price }}</div>
                <div>货号：{{ scope.row.product_sn }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="标签">
            <template slot-scope="scope">
              <div>
                <div>上架：{{ scope.row.publish_status | typecode }}</div>
                <div>新品：{{ scope.row.new_status | typecode }}</div>
                <div>推荐：{{ scope.row.recommand_status | typecode }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="sort" label="排序"></el-table-column>
          <el-table-column prop="sale" label="销量"></el-table-column>
          <el-table-column label="审核状态">
            <template slot-scope="scope">
              <div>
                <div>{{ scope.row.verify_status | passon }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="操作">
            <template slot-scope="scope">
              <div class="tableBtn">
                <el-button @click="updata(scope.row.id)" class="updata" type="primary">编辑</el-button>
                <el-button class="delete" type="danger">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination
          :current-page="listQuery.pageNum"
          @current-change="handleCurrentChange"
          layout="total,sizes,prev, pager, next"
					:page-sizes="[5,10,15,20]"
          :page-size="listQuery.pageSize"
					@size-change="handleSizeChange"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
// import axios from "axios";
//export 导出时 如果没有使用 default ，在其他文件引入的时候需要写{}
import { fetchProductList } from "@/api/product";
import { fetchProductBrandList } from "@/api/product";
import { fetchProductCateList } from "@/api/product"

export default {
  name: "product",
  data() {
    return {
      listQuery: {
        pageSize: 10, //一页10条数据
        pageNum: 1, //当前页
				name:"",
				product_category_id:null,
				brand_id:null,
				verify_status:null,
				publish_status:null,
      },
			defaultParams: {
        label: 'name',
        value: 'id',
        children: 'children'
    },
      list: [],
      product_attr: [],
			cateList:[],
			value: [],
      publish_status: "",
      product_attr_name: "",
      total: 0,
    };
  },
  mounted() {
    this.getProductData();
    this.getProductBrandData();
		this.getProductCateList();
  },
  filters: {
    typecode: function (value) {
      if (value === 0) {
        return "否";
      } else {
        return "是";
      }
    },
    passon: function (value) {
      if (value === 0) {
        return "未审核";
      } else {
        return "审核通过";
      }
    },
  },
  methods: {
    //获取商品列表信息
    async getProductData() {
      //调用封装好的fetchProductList()方法
      let res = await fetchProductList(this.listQuery);
      this.list = res.product;
      this.total = res.total;
			console.log(this.list);
    },
    async getProductBrandData() {
      var res = await fetchProductBrandList();
      this.product_attr = res.data;
    },
		async getProductCateList(){
			var res = await fetchProductCateList()
			this.cateList = res.data
		},
		handleCurrentChange:function(val){
			this.listQuery.pageNum= val
			this.getProductData()
		},
		handleSizeChange:function(val){
			this.listQuery.pageSize = val
			this.getProductData()
		},
		sq:function(){
			console.log(this.listQuery);
			this.getProductData()
		},
		re:function(){
			// 	pageSize: 10, //一页10条数据
      //  pageNum: 1, //当前页
			// 	name:"",
			// 	product_category_id:null,
			// 	brand_id:null,
			// 	verify_status:null,
			// 	publish_status:null,
			this.listQuery.name="";
			this.listQuery.product_category_id=null;
			this.listQuery.brand_id=null;
			this.listQuery.verify_status=null;
			this.listQuery.publish_status=null;
		},
		setCategoryid:function(res){
			this.listQuery.product_category_id = res[1]
		},
		updata:function(res){
			this.$router.push({name:"updateproduct",params:{"id":res}})
		}
  },
};
</script>

<style>
.input-width {
  width: 200px;
}

.productList {
  padding: 10px;
}

.productSousuo {
  border: 1px solid #ebeef5;
}

.productSousuoTitle {
  text-align: left;
  padding: 18px 20px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
}

.productSousuoinfo {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 20px;
}

.productSousuoinfo > div {
  width: 30%;
  font-size: 14px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 20px;
}

.re {
  width: 36px;
  height: 22px;
  padding: 0;
}

.sq {
  width: 36px;
  height: 22px;
  padding: 0;
  background-color: #409eff;
  color: #fff;
}

.productTableTitle {
  border: 1px solid #ebeef5;
  padding: 20px;
  display: flex;
  justify-content: space-between;
}

.productTableBody img {
  width: 80px;
  height: 80px;
}

.productTableBody td {
  text-align: center;
}

.tableBtn {
  display: flex;
}

.updata,
.delete {
  width: 56px;
  height: 28px;
  padding: 0;
  color: #fff;
}
</style>